<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name = "format-detection" content="telephone = no" />
		<title>排行榜</title>
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/base.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/mod.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/list.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/page.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/competition.css" />
		<script src="{$staticHost}/static/js/jquery-1.8.3.min.js"></script>
		<script src="{$staticHost}/static/js/js.js"></script>
	</head>

	<body>
		<!-- <div class="load-ios"></div>
		<div class="load "><span></span></div> -->
		
		<ul id="list" class="list-06 w640" ></ul>
		<script id="test" type="text/html">
			<% for(var i=0; i<rank.length ;i++){%>
				<li>
					<span class="num"><%=rank[i].rank %></span>
					<% if (rank[i].header.length>0){%>
					<img id="img" src=<%=rank[i].header%> >
					<%}%>
					<% if (rank[i].header.length==0){%>
					<img id="img" src="{$staticHost}/static/images/bg/group_image_nor-min.png">
					<%}%>
					<dl id="c-blue">
						<dt><%=rank[i].name%><% if(rank[i].authenticate==1){%><i class="ico-crown"></i><% } %><% if(rank[i].isActivity==1){%><i class="ico-activity"></i><% } %></dt>
						<dd>总里程<%=rank[i].totalMileage.toFixed(2) %>km</dd>
					</dl>
					<a href="<%=rank[i].url%>"></a>

				</li>	
			<%}%>
		</script>
	</body>
	
	<script>
	var time = new Date(new Date().getTime());
	time = (time.getFullYear()+"-"+(time.getMonth()+1)+"-"+time.getDate()+" "+time.getHours()+":"+time.getMinutes()+":"+time.getSeconds());

	var downTime = new Date(new Date().getTime());
	downTime = (downTime.getFullYear()+"-"+(downTime.getMonth()+1)+"-"+downTime.getDate()+" "+downTime.getHours()+":"+downTime.getMinutes()+":"+downTime.getSeconds());
		$(function(){
			$.getJSON('{$staticHost}/groupWeb/ranking', {}, function(data, error) {
				console.log(data);
				var info = data.rank;
				for(var i=0;i<info.length;i++){
					if(info[i].status == 0){
						info[i].url = "joggers://groupRoom/"+info[i]['gid'];
					}else{
						info[i].url = "joggers://groupInfo/"+info[i]['gid'];
					}
				}
				var html = template('test', data);
				document.getElementById('list').innerHTML = html;
				dipcss()
				if(document.getElementById('img').src==null){
					
					document.getElementById("img").src = "static/images/bg/group_image_nor-min.png";
				} 
	
			});
		});

	var browser = {
	versions: function() {
	var u = navigator.userAgent, app = navigator.appVersion;
	return {//移动终端浏览器版本信息 
	trident: u.indexOf('Trident') > -1, //IE内核
	presto: u.indexOf('Presto') > -1, //opera内核
	webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
	gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
	mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
	ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
	android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
	iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
	iPad: u.indexOf('iPad') > -1, //是否iPad
	webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
	};
	}(),
	language: (navigator.browserLanguage || navigator.language).toLowerCase()
	}
	
	$(".load" + (os() == 'ios' ? '-ios' : '')).css('display','block');
	
	function dipcss() {
		if (os() == 'ios'){
	 		$(".load-ios").css('display','none')
	 		$("#c-blue dt").css({"color":"#202f53","font-size":"16px"});
	 		$("#c-blue dd").css({"color":"#585c68", "font-size":"13px"});
	 		$("li:gt(2) .num").css({ "color": "#000", "font-size": "20" });
		}else if (browser.versions.android) {
	 		$(".load").css('display','none')
	 		$("#c-blue dt").css({"color":"#585c68","font-size":"17px","font-weight":"normal"});
	 		$("#c-blue dd").css({"color":"#585c68","font-size":"14px"});
	 		$("li:gt(2) .num").css({"color":"#202f53","font-size": "21" })
		}
	}

	function os() {
		return (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) ? 'ios' : 'android';
	}
</script>
{template 'show/web-footer'}
